<template>
  <div id="mineone">
    <div class="minetop">
      <div class="left" @click="funw3()">我的订单</div>
      <div class="right" @click="fung">更多订单</div>
      <van-icon class="tubiao" name="arrow" @click="fung" />
    </div>
    <div>
      <van-grid :column-num="5" class="tubiao1">
  <van-grid-item v-for="(item,index) in list" :key="index" :icon="item.icon" :text="item.title" />
</van-grid>
    </div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item><img src="https://hshop.honorfile.com/pimages//pages/picImages/99052808166610825099.jpg" alt=""></van-swipe-item>
        <van-swipe-item><img src="https://hshop.honorfile.com/pimages//pages/picImages/43941470043617414934.jpg" alt=""></van-swipe-item>
</van-swipe>
  </div>
</template>

<script>
import 'vant/lib/index.css';
import Vue from 'vue';

import { Button } from 'vant';
Vue.use(Button);
export default {
data(){
  return{
    list:[
      {"icon":"todo-list-o",
      "title":"待付款",},
      {"icon":"send-gift-o",
      "title":"待收货"},
      {"icon":"comment-o",
      "title":"待评价",},       
      {"icon":"balance-list-o",
      "title":"退款/退换"}, 
      {"icon":"other-pay",
      "title":"回收单"},  
    ]
  }
},
   methods:{
    funw3(){
      this.$router.push("/center")
    },
    fung(){
      this.$router.push("/listcerter")
    }
   }
}
</script>

<style scoped>
#mineone{
    width: 95%;
    margin: 0 auto;
    background-color: white;
    height: 14.3125rem;
    border-radius:.625rem ;
    margin-top: .45rem;
    overflow:hidden ;
}
.minetop{
  display: flex;
}
.left{
    font-weight:43.75rem;
    font-size: .875rem;
    margin: 1.25rem .9375rem;
}
.right{
    font-weight:43.75rem;
    font-size: .75rem;
    margin: 1.25rem .9375rem;
    margin-left:10.625rem ;
}
.tubiao{
  margin-top: 1.25rem ;
}
.tubiao1{
  margin-top: -1.25rem;
}
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
}
.my-swipe{
    border-radius:.625rem ;
    width: 95%;
    margin: 0 auto;
    height: 6.25rem;
}
img{
   width: 100%;
   height: 100%;
}
</style>

